<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增项目信息')" />
    <th:block th:include="include :: datetimepicker-css" />
    <th:block th:include="include :: summernote-css" />
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-projects-add">
        <div class="form-group" th:if="${@ShiroUtils.getLoginName().equals('admin')}">
            <div class="col-sm-10">
                <input id="autofill" style="height: 49px; margin-left: 20px;" class="form-control" type="text" />
            </div>
            <label class="col-sm-2 control-label">
                <a class="btn btn-success" onclick="autofill()"><i class="fa"></i> 自动识别</a>
            </label>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label is-required">项目名称：</label>
            <div class="col-sm-10">
                <input name="projectName" class="form-control" type="text" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">项目描述：</label>
            <div class="col-sm-10">
                <input type="hidden" class="form-control" name="content">
                <div class="summernote" id="content"></div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">立项时间：</label>
            <div class="col-sm-10">
                <div class="input-group date">
                    <input name="approvalTime" id="approvalTime" class="form-control" placeholder="yyyy-MM-dd" type="text">
                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label is-required">计划时间：</label>
            <div class="col-sm-5">
                <div class="input-group date">
                    <input name="plannedStartTime" class="form-control" placeholder="yyyy-MM-dd" type="text">
                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                </div>
            </div>
            <div class="col-sm-5">
                <div class="input-group date">
                    <input name="plannedEndTime" class="form-control" placeholder="yyyy-MM-dd" type="text">
                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">项目成员：</label>
            <div class="col-sm-10">
                <select name="teamMembers" id="teamMembers" class="user-select form-control select2-multiple" multiple required></select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label is-required">项目负责人：</label>
            <div class="col-sm-10">
                <select name="ownerId" id="ownerId" class="user-select form-control" required></select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label is-required">项目状态：</label>
            <div class="col-sm-10">
                <select required class="form-control" id="status" name="status" th:with="type=${@dict.getType('project_status')}">
                    <option value="">所有</option>
                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}"
                            th:value="${dict.dictValue}"></option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">部门：</label>
            <div class="col-sm-10">
                <input name="department" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">项目进度：</label>
            <div class="col-sm-10">
                <input name="progressRate" class="form-control" type="text">
            </div>
        </div>
    </form>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: select2-css" />
<th:block th:include="include :: select2-js" />
<th:block th:include="include :: datetimepicker-js" />
<th:block th:include="include :: summernote-js" />

<script th:inline="javascript">
    var prefix = ctx + "projects/projects"

    $("#form-projects-add").validate({
        focusCleanup: true
    });

    function submitHandler() {
        if ($.validate.form()) {
            $.operate.save(prefix + "/add", $('#form-projects-add').serialize());
        }
    }

    $("input[name='approvalTime']").datetimepicker({
        format: "yyyy-mm-dd",
        minView: "month",
        autoclose: true
    });

    $("input[name='plannedStartTime']").datetimepicker({
        format: "yyyy-mm-dd",
        minView: "month",
        autoclose: true
    });

    $("input[name='plannedEndTime']").datetimepicker({
        format: "yyyy-mm-dd",
        minView: "month",
        autoclose: true
    });

    $(function() {
        $(".user-select").select2({
            placeholder: '--选择用户--',
            ajax: {
                url: '/system/user/selectList',
                delay: 250,
                data: function (params) {
                    return {
                        userName: params.term
                    };
                }
            }
        });

        $('.summernote').summernote({
            lang: 'zh-CN',
            height: 100,
            dialogsInBody: true,
            callbacks: {
                onChange: function(contents, $edittable) {
                    $("input[name='" + this.id + "']").val(contents);
                },
                onImageUpload: function(files) {
                    var obj = this;
                    var data = new FormData();
                    data.append("file", files[0]);
                    $.ajax({
                        type: "post",
                        url: ctx + "common/upload",
                        data: data,
                        cache: false,
                        contentType: false,
                        processData: false,
                        dataType: 'json',
                        success: function(result) {
                            if (result.code == web_status.SUCCESS) {
                                $('#' + obj.id).summernote('insertImage', result.url);
                            } else {
                                $.modal.alertError(result.msg);
                            }
                        },
                        error: function(error) {
                            $.modal.alertWarning("图片上传失败。");
                        }
                    });
                }
            }
        });
    });

    function autofill() {
        var autoText= $("#autofill").val()
        if (autoText == "") {
            return
        }
        var at = autoText.split("	")
        $("input[name='projectName']").val(at[0])
        $("input[name='department']").val(at[1])
        var date = at[2].replace(/[\u4e00-\u9fa5]/g, "-").substring(0, at[2].length -1);
        $("#approvalTime").val(date)
        autoSelect($("#ownerId"), at[9])
        autoSelect($("#teamMembers"), at[10])
        $("#status").val(["1"]).trigger("change");
    }

    function autoSelect(item, userName) {
        $.ajax({
            url: '/system/user/selectList',
            data: {
                userName: userName
            }
        }).then(function (data) {
            data.results.forEach(function(result) {
                var option = new Option(result.text, result.id, true, true);
                item.append(option).trigger('change');
            })
            // manually trigger the `select2:select` event
            item.trigger({
                type: 'select2:select',
                params: {
                    data: data
                }
            });
        });
    }
</script>
</body>
</html>